// ./src/components/Users/UserModal.jsx
import React, { PropTypes } from 'react';
import styles from './UserModal'
import {
  Form,
  Row,
  Col,
  Modal,
  Input,
  Radio,
  TreeSelect,
  Card,
  Button,
  Select,
  InputNumber,
  Icon
} from 'antd';
const FormItem =Form.Item;
const { TextArea } = Input;
const userModel=({visible,dispatch,form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
    resetFields
  }})=>{
function onCancel(){
  dispatch({
    type: 'users/modalHide',
    payload: {}
  });
};
function handleSubmit(){
  validateFields((errors) => {
    if (errors) {
      return;
    }

    const name = getFieldsValue();
    const sex = getFieldsValue().sex;
    console.log('##################'+name.username+'#################');
    dispatch({
      type: 'users/modelSubmit',
      payload: {}
    });




  });
};
const formItemLayout = {
     labelCol: {
       xs: { span: 24 },
       sm: { span: 6 },
     },
     wrapperCol: {
       xs: { span: 24 },
       sm: { span: 14 },
     },
   };

    return(
      <div>
      <Modal title="用户信息"  visible={visible} onOk={()=>handleSubmit()} onCancel={()=>onCancel()}>
        <Form onSubmit={()=>handleSubmit()}>
          <FormItem {...formItemLayout} label="用户名" hasFeedback>
             {getFieldDecorator('username', { rules: [{
                 required: true, message: '用户名不可为空',
               }]})( <Input prefix={<Icon type="user" style={{ fontSize: 13 }}  placeholder="Username" />} /> )}
          </FormItem>


          <FormItem {...formItemLayout} label="密码" hasFeedback>
                   {getFieldDecorator('password', {
                     rules: [{ required: true, message: '请输入密码' }],
                   })(
                     <Input type='password' prefix={<Icon type="lock" style={{ fontSize: 13 }} />} placeholder="Password" />
                   )}
           </FormItem>




          <FormItem {...formItemLayout} label="真实姓名" hasFeedback>
             {getFieldDecorator('truename', {rules: [{
                 required: true, message: '真实姓名不可为空',
               }]})( <Input /> )}
          </FormItem>
          <FormItem {...formItemLayout} label="年龄" hasFeedback>
             {getFieldDecorator('age', {
               rules: [{
                  type: 'integer', message: '请输入数字',
                }, {
                  required: true, message: '年龄不可为空',
                }],})( <InputNumber min={10} max={200} /> )}
                <span > 岁</span>
          </FormItem>
          <FormItem {...formItemLayout} label="家庭住址" hasFeedback>
             {getFieldDecorator('address', {})( <TextArea rows={4} /> )}
          </FormItem>

          <FormItem {...formItemLayout} label="联系方式" hasFeedback>
             {getFieldDecorator('phone', {rules: [{
                type: 'number', message: '请输入电话号码',
              }, {
                required: true, message: '不可为空',
              }]})( <Input type='phone' /> )}
          </FormItem>

          <FormItem {...formItemLayout} label="性别" hasFeedback>
             {getFieldDecorator('sex', {})(
               <Radio.Group  >
               <Radio.Button value="boy">男</Radio.Button>
               <Radio.Button value="girl">女</Radio.Button>

               </Radio.Group> )}
          </FormItem>


          <FormItem {...formItemLayout} label="归属部门" hasFeedback>
             {getFieldDecorator('dept', {})(
               <Select placeholder="选择部门">
                  <Select.Option value="运营部">运营部</Select.Option>
                  <Select.Option value="技术部">技术部</Select.Option>
              </Select>)}
          </FormItem>


          <FormItem {...formItemLayout} label="职位" hasFeedback>
             {getFieldDecorator('position', {})(
               <Select placeholder="选择职位">
                  <Select.Option value="经理">经理</Select.Option>
                  <Select.Option value="员工">员工</Select.Option>
              </Select>)}
          </FormItem>
        </Form>
      </Modal>
      </div>
    );

};


export default Form.create()(userModel);
